<template>
    <div class="warp">
        <el-dialog destroy-on-close :before-close="closeDialog" :show-close="false" v-model="state.dialog.isShowDialog"
            :title="state.dialog.title" width="32%">
            <template #header="{ close, titleId, titleClass }">
                <div class="my-header">
                    <h4 :id="titleId" :class="titleClass" style="color: #fff !important;">引进产业链关键配套项目</h4>
                    <el-button style="background-color:#69FFE322 !important; color: #69FFE3; border: 0px !important;"
                        :icon="CircleCloseFilled" circle @click="close" />
                </div>
            </template>
            <div class="box">
                <el-table :data="state.data" v-loading="state.dialog.loading"
                    style="width: 100%;--el-table-border-color: none;" height="650" ref="tableRef">
                    <el-table-column label="项目名称" prop="name"></el-table-column>
                    <el-table-column label="数量(个)" prop="num"></el-table-column>
                    <el-table-column label="完成全年目标(%)" prop="rate"></el-table-column>
                    <el-table-column label="总投资(亿万)" prop="total"></el-table-column>
                </el-table>
            </div>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { CircleCloseFilled } from '@element-plus/icons-vue'
import { useDemoDialogOneApi } from '@/api/demo';
// 定义变量内容
const emit = defineEmits(['refresh'])
const tableRef = ref()
const state = reactive({
    // 弹窗信息
    dialog: {
        isShowDialog: false,
        title: '',
        loading: false,
    },
    data: [
        {
            name: '1',
            age: '2',
            sex: '男'
        },
        {
            name: '1',
            age: '2',
            sex: '男'
        },
        {
            name: '1',
            age: '2',
            sex: '男'
        },
        {
            name: '1',
            age: '2',
            sex: '男'
        },
        {
            name: '1',
            age: '2',
            sex: '男'
        },
        {
            name: '1',
            age: '2',
            sex: '男'
        },
        {
            name: '1',
            age: '2',
            sex: '男'
        },
        {
            name: '1',
            age: '2',
            sex: '男'
        },
        {
            name: '1',
            age: '2',
            sex: '男'
        },
        {
            name: '1',
            age: '2',
            sex: '男'
        },
        {
            name: '1',
            age: '2',
            sex: '男'
        },
        {
            name: '1',
            age: '2',
            sex: '男'
        },
        {
            name: '1',
            age: '2',
            sex: '男'
        },
        {
            name: '1',
            age: '2',
            sex: '男'
        },
        {
            name: '1',
            age: '2',
            sex: '男'
        },
        {
            name: '1',
            age: '2',
            sex: '男'
        },
        {
            name: '1',
            age: '2',
            sex: '男'
        },
        {
            name: '1',
            age: '2',
            sex: '男'
        },
        {
            name: '1',
            age: '2',
            sex: '男'
        }
    ]
})

// 打开dialog
const openDialog = () => {
    state.dialog.isShowDialog = true
    useDemoDialogOneApi().then((res: any) => {
        state.data = res
    })
}
const closeDialog = () => {
    emit('refresh')
    state.dialog.isShowDialog = false
}

// 暴露变量
defineExpose({
    openDialog
})


</script>

<style lang="scss" scoped>
.my-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.warp {
    :deep(.el-dialog) {
        background-color: rgba(0, 0, 0, 0.1) !important;
        border: 1px solid #69FFE3 !important;
        height: 60% !important;
    }

    :deep(.el-dialog .el-dialog__header) {
        margin-right: 0;
    }
}


.box {
    :deep(.el-table) {
        background-color: rgba(0, 0, 0, 0.1) !important;
    }

    :deep(.el-table tr) {
        background-color: rgba(0, 0, 0, 0.1) !important;
        color: #fff;
        font-size: 16px;
    }



    :deep(.el-table th) {
        background-color: #103d7888 !important;
        color: #AEBBC2;
        font-size: 18px;
    }

    :deep(.el-table .el-table__row:hover) {
        background-color: rgba(0, 0, 0, 0.1) !important;
    }



    :deep(.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell) {
        background-color: rgba(0, 0, 0, 0.3) !important;
    }
}
</style>